<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link th:href="@{/front-resource/css/style.css}" href="../static/front-resource/css/style.css" type="text/css" rel="stylesheet" />
    <!-- Favicon -->
    <!-- Favicon and Touch Icons -->
    <link th:href="@{/front-resource/images/favicon.png}" href="../static/front-resource/images/favicon.png" rel="shortcut icon" type="image/png">
    <link th:href="@{/front-resource/images/apple-touch-icon.png}" href="../static/front-resource/images/apple-touch-icon.png" rel="apple-touch-icon">
    <link th:href="@{/front-resource/images/apple-touch-icon-72x72.png}" href="../static/front-resource/images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
    <link th:href="@{/front-resource/images/apple-touch-icon-114x114.png}" href="../static/front-resource/images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
    <link th:href="@{/front-resource/images/apple-touch-icon-144x144.png}" href="../static/front-resource/images/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144">
    <title>首页</title>
</head>
<body>
<!-- Start Main Menu Area -->
<div th:replace="/common/frontCommon::header"></div>
<!-- End Main Menu Area -->

<div class="main-banner digital-agency-banner">
    <div class="d-table">
        <div class="d-table-cell">
            <div class="container">
                <div class="row h-100 align-items-center">
                    <div class="col-lg-12 col-md-12">
                        <div class="hero-content">
                            <h1 class="wow fadeInUp">发现 附近的 酒店</h1>
                            <p>想住哪？想住哪种酒店？哪种房间？想吃什么早餐？这里都有！</p>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12"> </div>
                </div>
                <div class="row h-100 align-items-center">
                    <div class="col-lg-12 col-md-12">
                        <div class="search-bar mt-5 p-3 p-lg-1 pl-lg-4">
                            <form action="/hotel/search">
                                <div class="row">
                                    <input type="hidden" name="indexSearch" value="true">
                                    <div class="col-lg-6 d-flex align-items-center form-group">
                                        <input type="text" name="keyName" placeholder="输入您想要搜索的酒店信息" class="form-control border-0 shadow-0">
                                    </div>
                                    <div class="col-lg-4 d-flex align-items-center form-group">
                                        <div class="input-label-absolute input-label-absolute-right w-100">
                                            <label for="location" class="label-absolute"><i class="fa fa-crosshairs"></i><span class="sr-only">City</span></label>
                                            <input type="text" name="keyLocation" placeholder="具体位置" id="location" class="form-control border-0 shadow-0">
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <button type="submit" class="btn btn-primary btn-block rounded-xl h-100">搜索 </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<section class="Campaigns pt80 pb40">
    <div class="container">
        <div class="row mb-5">
            <div class="col-md-8">
                <p class="subtitle text-secondary nopadding">像当地人一样生活</p>
                <h1 class="paddtop1 font-weight lspace-sm">最近预定</h1>
            </div>
            <div class="col-md-4 d-lg-flex align-items-center justify-content-end"><a href="" class="blist text-sm ml-2"> 所有酒店<i class="fas fa-angle-double-right ml-2"></i></a></div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12" th:each="hotel:${recentHotels}">
                <div class="ListriBox">
                    <figure>
                        <a th:href="@{'/hotel/detail?id='+${hotel.hotelId}}" class="wishlist_bt"></a>
                        <a th:href="@{'/hotel/detail?id='+${hotel.hotelId}}"><img th:src="@{'/img/hotel/'+${hotel.hotelImageName}}" class="img-fluid" alt="" >
                            <div class="read_more"><span>查看详情</span></div>
                    </a>
                    </figure>
                    <div class="ListriBoxmain">
                        <h3><a th:href="@{'/hotel/detail?id='+${hotel.hotelId}}" th:text="${hotel.hotelName}"></a></h3>
                        <i class="fa fa-crosshairs"></i>
                        <label class="address" th:text="${hotel.hotelLocation}"></label>
                    </div>
                    <ul>
                        <li><span th:attr="class=${hotel.hotelSign==0?'Rclosed':'Ropen'}" th:text="${hotel.hotelSign==0?'暂无空房':'可以预定'}"></span></li>
                        <li>
                            <div class="R_retings"><span></span><strong  th:text="'￥'+${hotel.lowPrize}+元起"></strong></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="how-we-do features pt80 pb80" id="about">
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="section-title text-center">
                    <h2>欢迎来到这里 </h2>
                    <h3>预定 <span>我们非常容易</span></h3>
                    <p>您可以通过以下教程了解如何进行酒店预定</p>
                </div>
            </div>
        </div>
        <div class="row pb-90">
            <div class="col-md-4">
                <div class="feat-item"> <span class="fab fa-renren"></span>
                    <h4>点击预定按钮或直接搜索</h4>
                    <p>点击预定按钮进入所有酒店页面，同时也可以通过首页的搜索进行关键字和地址的搜索</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feat-item"> <span class="fas fa-tools"></span>
                    <h4>选择或进行详细筛选</h4>
                    <p>在酒店列表中可以进行详细定位、价格区间、关键字等搜索，并选择合适的酒店点击进入详情</p>

                    <a th:href="@{/hotel/mapsearch}">搜索定位</a>

                </div>
            </div>
            <div class="col-md-4">
                <div class="feat-item"> <span class="fas fa-rocket"></span>
                    <h4>选择入住房型</h4>
                    <p>在酒店详情页面点击喜欢的房型，输入需要的个人信息，点击预定按钮即可</p>
                </div>
            </div>
        </div>
        <div class="dots-feat"> <img src="images/dots-2.png" alt="dots"> </div>
        <div class="cercil"></div>
    </div>
</section>

<section class="Campaigns pt80 pb40">
    <div class="container">
        <div class="row mb-5">
            <div class="col-md-8">
                <p class="subtitle text-secondary nopadding">像当地人一样生活</p>
                <h1 class="paddtop1 font-weight lspace-sm">热门酒店</h1>
            </div>
            <div class="col-md-4 d-lg-flex align-items-center justify-content-end"><a href="" class="blist text-sm ml-2"> 所有酒店<i class="fas fa-angle-double-right ml-2"></i></a></div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12" th:each="hotel:${hotHotels}">
                <div class="ListriBox">
                    <figure>
                        <a th:href="@{'/hotel/detail?id='+${hotel.hotelId}}" class="wishlist_bt"></a>
                        <a th:href="@{'/hotel/detail?id='+${hotel.hotelId}}">
                            <img th:src="@{'/img/hotel/'+${hotel.hotelImageName}}" class="img-fluid" alt="" >
                            <div class="read_more"><span>查看详情</span></div>
                        </a>
                    </figure>
                    <div class="ListriBoxmain">
                        <h3><a th:href="@{'/hotel/detail?id='+${hotel.hotelId}}" th:text="${hotel.hotelName}"></a></h3>
                        <i class="fa fa-crosshairs"></i>
                        <label class="address" th:text="${hotel.hotelLocation}"></label>
                    </div>
                    <ul>
                        <li><span th:attr="class=${hotel.hotelSign==0?'Rclosed':'Ropen'}" th:text="${hotel.hotelSign==0?'暂无空房':'可以预定'}"></span></li>
                        <li>
                            <div class="R_retings"><span></span><strong  th:text="'￥'+${hotel.lowPrize}+元起"></strong></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-less-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <ul class="clientlogo-list">
                    <li><img src="images/client-logo1.png" alt=""></li>
                    <li><img src="images/client-logo2.png" alt=""></li>
                    <li><img src="images/client-logo3.png" alt=""></li>
                    <li><img src="images/client-logo4.png" alt=""></li>
                    <li><img src="images/client-logo5.png" alt=""></li>
                    <li><img src="images/client-logo6.png" alt=""></li>
                </ul>
            </div>
        </div>
    </div>
</section>
<div th:replace="/common/frontCommon::footer"></div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper,js}, then Bootstrap JS -->
<script th:src="@{/front-resource/js/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/popper.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/getfund-nav.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/owl.carousel.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/waypoints.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/jquery.counterup.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/swiper.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/custom.js}" type="text/javascript"></script>
</body>
</html>